import React, { Component, useRef } from 'react'
import { Form, Input,  Space, Button } from 'antd'
import { SearchOutlined } from "@ant-design/icons";
import _ from 'lodash'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import '../style/style.less'
import {apimemberBalancePage,apimemberCartPage } from '@/request/cashier';
import {phoneReg} from '@/utils/regexp'
const SearchHeader = ({ getValue }) => {
  const formRef = useRef()
  const onFinish = (values) => {
    Object.keys(values).forEach(key=>{
      if(!values[key]){
        delete values[key]
      }
    })
    getValue(values)
  }
 
  const reset = () => {
    formRef.current.setFieldsValue({
      nickName: '',
      memberMobile: ''
    })
    getValue({})
  }
  return <Form layout={'inline'} onFinish={onFinish} ref={formRef} >
    <Form.Item name="nickName">
      <Input suffix={<SearchOutlined />} placeholder="用户名" />
    </Form.Item>
    <Form.Item  name={'memberMobile'}>
      <Input suffix={<SearchOutlined />} placeholder="手机号码"  />
    </Form.Item>
    <Form.Item>
      <Space>
        <Button type='primary' htmlType='submit'>搜索</Button>
        <Button onClick={reset}>重置</Button>
      </Space>
    </Form.Item>
  </Form>
}

export default class Members extends Component {
  state = {
    columns: [
      {
        title: '手机号码',
        dataIndex: 'memberMobile',
        key: 'memberMobile'
      },
      {
        title: '用户名',
        dataIndex: 'nickName',
        key: 'nickName',
        render: (text, record) => {
          return text || '无'
        }
      },
      {
        title: '余额',
        dataIndex: 'balance',
        key: 'balance',
        render: (text, record) => {
          return <React.$Price price={text} />
        }
      },
      {
        title: '操作',
        fixed: 'right',
        render: (text, record) => {
          return <>
            <TheButton hasPermi={['cashier:members:view']} onClick={() => this.props.history.push(`/cashier/members/list/${record.memberId}`)}>查看消费明细</TheButton>
          </>
        }
      },
    ],
    dataSource: [

    ],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    this.setState({ loading: true })
    let {pageData,searchValue} = this.state
    await apimemberCartPage({...pageData,...searchValue}).then(res=>{
      if (res.data && res.code === 0) {
        this.setState({
          dataSource: res.data,
          pageData: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          },
          total: res.totalCount
        })
      }
    })
    this.setState({ loading: false })
  }
  
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  getValue = value => {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }
  

 
  render() {
    const { columns, dataSource, loading, pageData: { pageSize, pageNo }, total,  } = this.state
    return (
      <div className='p-layout-box'>
        <SearchHeader getValue={this.getValue} />
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} loading={loading} scroll={{ x: "max-content", y: '63vh' }} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
      </div>
    )
  }
}
